<template>
    <div id="barchart">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/vis' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>柱状图</el-breadcrumb-item>
        <el-breadcrumb-item>基础柱状图</el-breadcrumb-item>
      </el-breadcrumb>
        <div id="bar"></div>
        <div id="barData">
           <el-input type="textarea" :rows="2"  v-model="barDataS" @change="dataChange">
           </el-input>
           <el-button type="primary" plain @click="barSort">Sort</el-button>
        </div>
    </div>
</template>
<script>
import { BarChart } from './barChart'
export default {
  name: 'BarChart',
  data () {
    return {
      barData: [],
      barChart: {}
    }
  },
  created () {
    this.setBarData()
    this.barChart = BarChart
  },
  mounted () {
    this.barChart.data = this.barData
    this.barChart.divId = 'bar'
    this.barChart.title = 'BarChart'
    this.barChart.xLabel = 'category'
    this.barChart.yLabel = 'Num'
    this.barChart.draw()
  },
  computed: {
    barDataS: {
      get: function () {
        let valueString = ''
        for (let i = 0; i < this.barData.length - 1; ++i) {
          valueString += this.barData[i].name + ':' + this.barData[i].value + ','
        }
        valueString += this.barData[this.barData.length - 1].name + ':' + this.barData[this.barData.length - 1].value
        return valueString
      },
      set: function (d) {
        let values = d.split(',')
        this.barData = []
        for (let i = 0; i < values.length; ++i) {
          this.barData.push({
            name: parseInt(values[i].split(':')[0]),
            value: parseInt(values[i].split(':')[1])
          })
        }
      }
    }
  },
  methods: {
    setBarData () {
      let num = parseInt(Math.random() * 10 + 15)
      for (let i = 0; i < num; ++i) {
        this.barData.push({
          name: i,
          value: parseInt(Math.random() * 30)
        })
      }
    },
    dataChange () {
      this.barChart.data = this.barData
      this.barChart.update()
    },
    barSort () {
      this.barData.sort((a, b) => {
        return a.value - b.value
      })
      // this.barChart.sort()
      this.barChart.data = this.barData
      this.barChart.update()
    }
  }
}
</script>
<style scoped>
#barchart {
    height: 100%;
    width: 100%;
}
#bar {
    height: 60%;
    width: 100%;
}
#barData {
    height: 40%;
    width: 100%;
}
</style>
